<!-- components/custom-form/custom-form.vue -->
<template>
	<uni-forms label-width="0">
		<uni-forms-item>
			<uni-easyinput type="text" :clearable="false" placeholder="请输入手机号" />
		</uni-forms-item>
		<uni-forms-item>
			<uni-easyinput type="password" :clearable="false" placeholder="请输入密码" />
		</uni-forms-item>
		<uni-forms-item>
			<uni-easyinput type="textarea" :clearable="false" />
		</uni-forms-item>
	</uni-forms>
	<button type="primary">提交</button>
</template>

<script setup>
	// 仅在微信小程序内生效， 可以修改外部引入组件的属性
	// #ifdef MP-WEIXIN
	defineOptions({
		options: {
		  // 修改组件内部样式：微信小程序端写法
		  styleIsolation: 'shared',
		},
	}) 
	// #endif
</script>

<style lang="scss">
	.uni-forms {
		margin: 20px;
	}

	// ::v-deep  修改组件内部样式：H5 端的写法 
	// 可以修改外部引入组件的样式
	::v-deep .uni-easyinput__content-input {
		border: 1px solid red;
		padding: 10px;
	}
</style>